import React, { Component, createRef } from 'react';

import { Layout, Menu, Breadcrumb,message,Avatar, Image} from 'antd';
import { UserOutlined, VideoCameraOutlined, UploadOutlined, PoweroffOutlined } from '@ant-design/icons';

import Model from '@/model/common'
import CheckLogin from '@/hoc/CheckLogin'
import AddUsers from './AddUsers'
import Update from './Update'
import './Home.css'
//
import Routes from '@/router/nest'
const { Header, Content, Sider } = Layout;

class Test extends Component {
  constructor(props) {
    super(props)
    this.statistics = createRef()
  }
  state = {
    adminInfo: {},
    state: '',
    isp: "",
    isShow: false,
    beakarr:[ ['后台首页', '用户管理', '用户列表'],
    ['后台', '视频管理', '视频列表'],
    ['后台', '上传管理', '上传列表']],
    breadcrumb: [
      '后台首页', '用户管理', '用户列表',
    ]
  }
  render() {
    let { adminInfo, state, isp, isShow,breadcrumb} = this.state;
    return (
      <div className="home">
        <Layout>
          <Header className="header">
            <div className="system_logo" >
              <img src="https://dss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=1986451467,394304688&fm=26&gp=0.jpg" height="64" alt="" />
            </div>
            <div className="righthead">
              <span className="userInfo">亲！你好{adminInfo.username} 上次登录于 {state}  {isp} ({adminInfo.last_ip})</span>
              
              <div className="logout" >
                <Avatar
                src={<Image src="https://ftp.bmp.ovh/imgs/2021/06/ce67b317588b93c3.jpg" />}
              />
                <PoweroffOutlined style={{ cursor: "pointer" ,marginLeft:'100px'}} onClick={this.logout}/>
                </div>
            </div>
          </Header>
          <Layout >
            <Sider width={200} className="site-layout-background" >
              <Menu theme="dark" mode="inline" defaultSelectedKeys={isShow ? ["1"] : ["0"]} onClick={this.getMenu}>
                <Menu.Item key="1" icon={<UserOutlined />}>
                  用户管理
        </Menu.Item>
                <Menu.Item key="2" icon={<VideoCameraOutlined />}>
                  视频管理
        </Menu.Item>
                <Menu.Item key="3" icon={<UploadOutlined />}>
                  上传管理
        </Menu.Item>
              </Menu>
            </Sider>
            <Layout style={{ padding: '0 24px 24px' }}>
              {isShow ?
                <Breadcrumb style={{ margin: '20px 0 0 0' }}>
                  <Breadcrumb.Item>{breadcrumb[0]}</Breadcrumb.Item>
                  <Breadcrumb.Item>{breadcrumb[1]}</Breadcrumb.Item>
                  <Breadcrumb.Item>{breadcrumb[2]}</Breadcrumb.Item>
                </Breadcrumb>
                : <div></div>
              }
              <Content
                className="site-layout-background"
                style={{
                  padding: 24,
                  margin: 0,
                  minHeight: 280,
                }}
              >
                {/* 路由组件加载处 */}
                {isShow ? <Routes /> : <div style={{ textAlign: "center", fontSize: "32px" }}>欢迎来到xxx管理系统</div>}

              </Content>
            </Layout>
          </Layout>
        </Layout>
      </div>
    );
  }

  //侧边栏菜单切换
  getMenu = (e) => {
    // console.log(e.key);

    let listarr = ['/home/usercontrol', '/home/video', '/home/upload']
    // let beakarr = [['后台首页', '用户管理', '用户列表'],
    // ['后台', '视频管理', '视频列表'],
    // ['后台', '上传管理', '上传列表']]
    this.props.history.push(listarr[e.key - 1])
    this.setState((state) => {
      return {
        isShow: true,
        breadcrumb:state.beakarr[e.key-1]
      }
    }) 
  }
  //退出登录
  logout = () => {
    var r = window.confirm('你确认退出登录?')
    if (r) {
      localStorage.removeItem('jwt')
      this.props.history.push('/login')
    }
  }
  componentDidMount() {
    //获取当前登录用户信息
    if (!this.state.isShow) {
      this.props.history.push("/home")
    }
    Model.getAdminInfo().then(ret => {
      // console.log(ret);
      this.setState(() => {
        return {
          adminInfo: ret.accountInfo,
          state: ret.accountInfo.last_login_addr.state,
          isp: ret.accountInfo.last_login_addr.isp,
        }
      })
    })
  }
}

export default CheckLogin(Test);
